<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts';
const tabsIndex = ref(0)

const barChart = ref<echarts.ECharts | null>(null);

//图表初始化
function initChart(){
    barChart.value = echarts.init(document.getElementById('barChart'));
    // 绘制图表
    barChart.value.setOption({
        grid: {
            left: '7%',
            top: '15%',
            right: '6%',
            bottom: '6%'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            data: ['盘煤重量', '账面重量', '盈亏重量']
        },
        xAxis: [
            {
                type: 'category',
                data: listData.value.timeData,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '重量',
                
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '盈亏重量',
                
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '盘煤重量',
                type: 'bar',
                tooltip: {},
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#317DF7'
                        },
                        {
                            offset: 1,
                            color: '#88B4FA'
                        }
                    ])
                },
                data: listData.value.fuelBunkerData
            },
            {
                name: '账面重量',
                type: 'bar',
                tooltip: {},
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#10CC9D'
                        },
                        {
                            offset: 1,
                            color: '#67E8C8'
                        }
                    ])
                },
                data: listData.value.bookBunkerData
            },
            {
                name: '盈亏重量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {},
                colro:['#F49F17'],
                itemStyle: {
                    color: '#F49F17'
                },
                data: listData.value.diffWeight
            }
        ]
    });
}


import { FuelBunkerTRecordStaticData } from "@/api";

const listData = ref<any>([])
const getFuelBunkerTRecordStaticData = () => {
    FuelBunkerTRecordStaticData().then(res=>{
        console.log('list-------',res.data)
        listData.value = res.data
        initChart()
    })
}

onMounted(() => {
    getFuelBunkerTRecordStaticData()
});
onUnmounted(() => {
    if (barChart.value) {
        barChart.value.dispose();
    }
})

</script>
<template>
    <div class="flex_bg">
        <!-- <div class="deadline">
            统计数据截止日期：
        </div> -->

        <div class="table_info">
            <table>
                <tr>
                    <th>月</th>
                    <th v-for="(item,index) in listData.timeData" :key="index">{{ item }}</th>
                </tr>
                <tr>
                    <th>盘煤重量</th>
                    <td v-for="(item,index) in listData.fuelBunkerData" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <th>账面重量</th>
                    <td v-for="(item,index) in listData.bookBunkerData" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <th>盈亏状态</th>
                    <td v-for="(item,index) in listData.statusDesp" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <th>盈亏重量</th>
                    <td v-for="(item,index) in listData.diffWeight" :key="index">
                        <p v-if="item > 0" class="red">{{ item }}</p>
                        <p v-else-if="item < 0" class="green">{{ item }}</p>
                        <p v-else >{{ item }}</p>
                    </td>
                </tr>
                <tr>
                    <th>盈亏比例</th>
                    <td v-for="(item,index) in listData.bunkerPercentData" :key="index">
                        <p v-if="parseFloat(item.replace('%', '')) > 0" class="red">{{ item }}</p>
                        <p v-else-if="parseFloat(item.replace('%', '')) < 0" class="green">{{ item }}</p>
                        <p v-else >{{ item }}</p>
                    </td>
                </tr>
            </table>
        </div>

        <div class="bar_chart_main" id="barChart"></div>

    </div>
</template>
<style scoped lang="scss">
.bar_chart_main {
    width: 100%;
    height: 500px;
    margin-top: 20px;
}

.informa_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .informa_3d {
        flex-shrink: 0;
        width: 320px;

        h3 {
            font-size: 18px;
            line-height: 30px;
            font-weight: bold;
        }
    }

    .table_info {
        td {
            font-size: 14px;
        }

        th {
            font-size: 14px;
        }
    }

    ul {
        flex-shrink: 0;
        width: 190px;
    }

    li {
        margin-top: 10px;
        padding: 10px 10px 10px 35px;
        position: relative;
        cursor: pointer;

        &::before {
            content: ' ';
            position: absolute;
            left: 15px;
            top: 18px;
            width: 12px;
            height: 12px;
            background: #2565C8;
            border-radius: 50%;
        }

        span {
            display: block;
            font-size: 16px;
            color: #667581;
            line-height: 0px;
            line-height: 30px;
        }

        p {
            font-weight: bold;
            font-size: 20px;
            color: #3B4552;
            line-height: 30px;
        }
    }
}

.informa_title {
    font-weight: bold;
    font-size: 22px;
    color: #3D4755;
    line-height: 30px;
    text-align: center;

}

.stati_info {
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    .item {
        width: 32%;
        flex-shrink: 0;

        h3 {
            text-align: center;
            height: 45px;
            line-height: 45px;
            background: #CCDDF9;
            border-radius: 4px 4px 4px 4px;
            font-weight: bold;
            font-size: 18px;
            color: #092A5F;
        }

        ul {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                width: 48%;
                background: #fff;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #E0E5ED;
                margin-top: 10px;
                padding: 10px 10px 10px 35px;
                position: relative;
                cursor: pointer;

                &::before {
                    content: ' ';
                    position: absolute;
                    left: 15px;
                    top: 18px;
                    width: 12px;
                    height: 12px;
                    background: #2565C8;
                    border-radius: 50%;
                }

                &:hover {
                    border: 1px solid #2565C8;
                }

                span {
                    display: block;
                    font-size: 16px;
                    color: #667581;
                    line-height: 0px;
                    line-height: 30px;
                }

                p {
                    font-weight: bold;
                    font-size: 20px;
                    color: #3B4552;
                    line-height: 30px;
                }
            }
        }
    }
}

.deadline {
    font-size: 15px;
    color: #2565C8;
    line-height: 30px;
}

.statis_tabs {
    display: flex;
    align-items: center;
    justify-content: center;

    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #2565C8;
        border-radius: 4px;
        overflow: hidden;

        li {
            width: 210px;
            line-height: 44px;
            text-align: center;
            font-weight: 500;
            font-size: 16px;
            color: #3B4552;
            cursor: pointer;

            &.hover {
                color: #fff;
                background: #2565C8;
            }
        }
    }
}
</style>